<!--
 * @文件名称：  simulatieSign.vue
 * @包路径：   simulatieSign
 * @版权所有： 北京数字医信科技有限公司 (C) 2020
 *
 * @文件描述:  simulatieSign
 * @版本:       v1.0
 * @作者        zhangshumiao
 * @创建时间    2020/3/19 13:42
 *
 * @修改记录：
  -----------------------------------------------------------------------------------------------
   ----------- 时间      |   修改人    |     修改的方法       |         修改描述   ---------------
  -----------------------------------------------------------------------------------------------
-->
<template>
  <el-row>
    <el-row class="elRowLeft">
      <p class="pHight">请选择一条签名数据进行模拟签名</p>
      <el-row class="loadLater">
        <el-col class="allBackGround">
          <el-row>
            <el-col :span="21"><p class="p_load">欢迎登陆，<span>{{getParentInfo.userName}}</span></p></el-col>
            <el-col :span=3>
              <el-button type="primary" size="medium" class="buttonStyle" @click="loginOut" v-if="loginOutSign">退出自动签</el-button>
            </el-col>
          </el-row>
          <el-tabs v-model="prescriptionVal" type="card" tab-position="left" @tab-click="tabClick">
            <el-tab-pane label="选择患者" disabled></el-tab-pane>
            <el-tab-pane :label="prescriptionTitle" :name="prescriptionTitle">
              <div class="tableVal">
                <h3 class="tableValTitle">处方</h3>
                <div>
                  <p>医师诊断：<span>{{SignData.prescription.diagnose}}</span></p>
                  <div class="tableValFlex"><p>药品名称：<span>{{SignData.prescription.name}}</span></p><p>药品规格：<span>{{SignData.prescription.recipeInfo.standard}}</span></p></div>
                  <div class="tableValFlex"><p>每次用量：<span>{{SignData.prescription.recipeInfo.dosage}}</span></p><p>使用频率：<span>{{SignData.prescription.recipeInfo.frequency}}</span></p></div>
                  <div class="tableValFlex"><p>用法：<span>{{SignData.prescription.recipeInfo.usage}}</span></p><p>数量：<span>{{SignData.prescription.recipeInfo.quantity}}</span></p></div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="imageReportTitle" name="李四女6岁">
              <div class="tableVal">
                <h3 class="tableValTitle">影像报告</h3>
                <div>
                  <div class="tableValFlex"><p>临床表现：<span>{{SignData.imageReport.clinicalSympton}}</span></p><p>临床印象：<span>{{SignData.imageReport.clinicalDiagnosis}}</span></p></div>
                  <div class="tableValFlex"><p>检查类型：<span>{{SignData.imageReport.examModality}}</span></p><p>检查部位：<span>{{SignData.imageReport.examBodypart}}</span></p></div>
                  <div class="tableValFlex"><p>检查方法：<span>{{SignData.imageReport.examProcedurestepName}}</span></p><p>会诊状态：<span>{{SignData.imageReport.consultationStatus}}</span></p></div>
                  <p>备注：<span>{{SignData.imageReport.clinicalMemo}}</span></p>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="medicalRecordTitle" name="王五男42岁">
              <div class="tableVal">
                <h3 class="tableValTitle">病历</h3>
                <div>
                  <p>就诊时间：<span>{{SignData.medicalRecord.visitingTime}}</span></p>
                  <div class="tableValFlex"><p>就诊科室：<span>{{SignData.medicalRecord.departMent}}</span></p><p>门诊号：<span>{{SignData.medicalRecord.outNumber}}</span></p></div>
                  <div class="tableValFlex"><p>费别：<span>{{SignData.medicalRecord.treatment}}</span></p><p>主诉：<span>{{SignData.medicalRecord.complaint}}</span></p></div>
                  <div class="tableValFlex"><p>现病史：<span>{{SignData.medicalRecord.historyIllness}}</span></p><p>过敏史：<span>{{SignData.medicalRecord.historyAllergy}}</span></p></div>
                  <p style="color: #409EFF; margin-bottom: 10px;">*加密推送</p>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane disabled></el-tab-pane>
          </el-tabs>
          <div class="doctorSignS">
            <p class="doctorSign">医师签名：</p><img :src="doctorSignImg" alt="" v-if="doctorSignImgShow">
            <!--<p class="doctorSign">医师签名：</p><img src="../.././assets/image/image_ywx_down.png" alt="">-->
          </div>
          <el-button type="primary" size="medium" class="buttonStyle" @click="signDataSubmit">提交</el-button>
        </el-col>
        <el-col>
          <div  v-if="messageResultInfo" class="resultInfo">
            <messageResult  :certTextarea="certTextarea" :certTextareaTitle="certTextareaTitle"/>
            <p class="resultSignInfo">签名结果：<span v-text="signResultStatus"></span> <span class="copyColor" @click="autoSignResult">主动获取标签结果</span> <span class="copyColor" @click="copyOrderInfo">复制订单唯一标识</span></p>
            <span class="copyColor keyCopyColor" @click="keyEvidence">一键取证</span>
          </div>
        </el-col>
        <el-col :span="10" v-if="signImgShow">
          <certificate :certificateResult="signResultObjUse" diffVal="1"/>
        </el-col>
      </el-row>
    </el-row>
  </el-row>
</template>

<script>
import messageResult from './messageResult.vue'
import certificate from './certificate.vue';
import { SignData } from '../../const/ConstValue'
export default {
  components: {
    certificate,
    messageResult
  },
  data() {
    return {
      prescriptionTitle: '', // 处方标题
      imageReportTitle: '', // 影像报告标题
      medicalRecordTitle: '', // 病历标题
      messageResultInfo: false, // 返回信息是否展示
      certTextarea: '', // 返回信息
      certTextareaTitle: '申请成功!接口返回信息如下', // 返回信息标题
      signResultStatus: '', // 签名结果状态
      signImgShow: false, // 签名照片展示
      orderUniqueid: '', // 订单唯一标识
      prescriptionVal: '', // tab绑定值
      SignData: {}, // tab内容
      signResultObjUse: {}, // 签名下证内容
      getParentInfo: this.tranferInfo, // 接收父组件值
      signResultInfo: {}, // 签名详情中转
      getSign: null, //  签名结果定时器
      doctorSignImg: '', // 医师签名签章
      doctorSignImgShow: false, // 医师签名签章展示
      userOpenId: '', // 请求用户签章openId
      userInterval: null, //  请求用户签章定时器
      loginOutSign: true, // 退出自动签
    }
  },
  props: {
    tranferInfo: {
      type: Object,
      default: () => {}
    },
    isShow: {
      type: Boolean,
      default: () => {}
    }
  },
  '$route.path': {
    handler: function(newVal, oldVal) {
      if (newVal != '/autoSign') {
        clearInterval(this.getSign);
        clearInterval(this.userInterval);
      }
    },
    // 深度观察监听
    deep: true
  },
  created() {
    this.SignData = SignData;
  },
  mounted() {
    this.applySignData();
  },
  methods: {
    tabClick() {
      console.log(this.prescriptionVal)
    },
    // 请求签名数据
    applySignData() {
      console.log(this.SignData);
      this.prescriptionTitle = `${this.SignData.prescription.patientName}${this.SignData.prescription.patientSex}${this.SignData.prescription.patientAge}`;
      this.imageReportTitle = `${this.SignData.imageReport.patientName}${this.SignData.imageReport.patientSex}${this.SignData.imageReport.patientAge}`;
      this.medicalRecordTitle = `${this.SignData.medicalRecord.patientName}${this.SignData.medicalRecord.patientSex}${this.SignData.medicalRecord.patientAge}`;
      console.log(this.prescriptionTitle)
      this.prescriptionVal = this.prescriptionTitle;
    },
    // 提交
    signDataSubmit() {
      let obj = this.parameter();
      this.messageResultInfo = false;
      this.signImgShow = false;
      this.doctorSignImgShow = false;
      this.$API.signSyn(obj).then(result => {
        if (!this.$API.ApiRequest(result)) { return false }
        this.certTextarea = JSON.stringify(result);
        this.orderUniqueid = result.data.uniqueId;
        this.messageResultInfo = true;
        this.signResultStatus = '未签名';
        console.log(result)
        let that = this;
        setTimeout(function () {
          that.getSign = setInterval(function () {
            that.signDetails(result.data.uniqueId)
          }, 1000)
        }, 2 * 1000)
      }).catch(() => {
        this.$API.ErrBase('请求出现异常')
      })
    },
    // 提交的参数
    parameter() {
      let obj = {};
      if (this.prescriptionVal == '张三男28岁') {
        obj = {
          signType: 1,
          msg: {
            head: {
              templateId: 'recipe'
            },
            body: this.SignData.prescription
          }
        }
        obj.msg.body.openId = this.getParentInfo.openId;
        // obj.msg.body.openId = 'c5888a1bae88605bqf934wa3e1ya3350473';
      } else if (this.prescriptionVal == '李四女6岁') {
        obj = {
          signType: 1,
          msg: {
            head: {
              templateId: 'viewport'
            },
            body: this.SignData.imageReport
          }
        }
        obj.msg.body.openId = this.getParentInfo.openId;
        // obj.msg.body.openId = 'c5888a1bae88605bqf934wa3e1ya3350473';
        delete obj.msg.body.clinicalMemo;
      } else if (this.prescriptionVal == '王五男42岁') {
        obj = {
          signType: 1,
          msg: {
            head: {
              templateId: 'hash'
            },
            body: {
              openId: this.getParentInfo.openId,
              // openId: 'c5888a1bae88605bqf934wa3e1ya3350473',
              patientName: this.SignData.medicalRecord.patientName,
              patientSex: this.SignData.medicalRecord.patientSex,
              patientAge: this.SignData.medicalRecord.patientAge,
              subject: '',
              remarks: '',
              hashType: 'MD5',
              hashValue: '123',
              urId: '',
            }
          }
        }
      }
      return obj
    },
    // 获取签名详情
    signDetails(uniqueid) {
      let obj = {
        uniqueId: uniqueid
      }
      this.$API.getSignInfo(obj).then(result => {
        if (!this.$API.ApiRequestS(result)) { return false }
        this.signResultInfo = result.data; // 将结果传个签名组件
        this.signResultInfo.uniqueid = uniqueid;
        this.userOpenId = result.data.openId;
        let that = this;
        this.userInterval = setInterval(function () {
          that.userSignClick()
        }, 1000)
        clearInterval(this.getSign);
      }).catch(() => {
        this.$API.ErrBase('请求出现异常')
      })
    },
    // 主动获取签名结果
    autoSignResult() {
      this.userSign();
    },
    // 获取用户签章
    userSignClick() {
      this.userSign()
    },
    // 获取用户签章ajax
    userSign() {
      let obj = {
        openId: this.userOpenId
      }
      this.$API.getUserStatus(obj).then(result => {
        if (!this.$API.ApiRequestS(result)) { return false }
        clearInterval(this.userInterval)
        this.signResultStatus = '已签名';
        this.doctorSignImg = `data:image/png;base64,${result.data.stamp}`;
        this.doctorSignImgShow = true;
      }).catch(() => {
        this.$API.ErrBase('请求出现异常')
      })
    },
    // 一键取证
    keyEvidence() {
      let obj = {
        uniqueId: this.orderUniqueid
      }
      this.$API.getSignInfo(obj).then(result => {
        if (!this.$API.ApiRequestS(result)) { return false }
        this.signResultInfo = result.data; // 将结果传个签名组件
        this.signResultInfo.uniqueid = this.orderUniqueid;
        this.signResultObjUse = this.signResultInfo;
        this.signImgShow = true;
      }).catch(() => {
        this.$API.ErrBase('请求出现异常')
      })
    },
    // 复制订单标识
    copyOrderInfo() {
      let data = this.orderUniqueid;
      let oInput = document.createElement('input');
      oInput.value = data;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      document.execCommand('Copy'); // 执行浏览器复制命令
      this.$message({
        message: '复制订单标识成功',
        type: 'success'
      });
      oInput.remove();
    },
    // 登出
    loginOut() {
      console.log(this.getParentInfo)
      let _openId = {
        openId: this.getParentInfo.openId
      }
      this.$API.selfSignQuit(_openId).then(result => {
        if (!this.$API.ApiRequest(result)) { return false }
        // this.$emit('upoladIsShow', true);
        this.loginOutSign = false;
        this.$API.SuccessBase('退出自动签成功');
      }).catch(() => {
        this.$API.ErrBase('请求出现异常')
      })
    }
  }
}
</script>

<style>

</style>
